<template>
  <el-dialog
    v-el-drag-dialog
    title="订单图片"
    :visible.sync="visible"
    width="800px"
  >
    <el-timeline :reverse="false">
      <el-timeline-item
        v-for="(activity, index) in images"
        :key="index"
        :timestamp="formatTime(activity)"
        placement="top"
      >
        <el-image class="order-img" :src="imageViewPath+activity.imageUrl" :fit="fill" :preview-src-list="[imageViewPath+activity.imageUrl]" />
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script>
  import { queryOrderImagesData } from '@/api'
  import moment from 'dayjs'
  import { formatColumnMap } from '@/utils'

  export default {
    name: 'OrderImages',
    data() {
      return {
        moment,
        visible: false,
        orderCode: '',
        imageViewPath: '',
        images: [],
        orderImageFlagMap: []
      }
    },
    methods: {
      async open(temp) {
        if (temp) {
          this.orderCode = temp.orderCode
          const res = await queryOrderImagesData({ orderCode: temp.orderCode })
          this.imageViewPath = res.data.imageViewPath
          this.images = JSON.parse(res.data.images)
          this.orderImageFlagMap = JSON.parse(res.data.orderImageFlagMap)
        }
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      formatTime(item) {
        const status = formatColumnMap(this.orderImageFlagMap, 'value', item.imageFlag, 'desc')
        return item.createUser + ' ' + moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') + ' ' + status
      }
    }
  }
</script>

<style lang="scss" scoped>
.order-img {
  max-width: 200px;
}
</style>
